<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AR Tree</title>
    <script src="./assets/aframe.js"></script>
    <script src="./assets/mindar-image.js"></script>
    <script src="./assets/mindar-aframe.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #000;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
        }
        .a-canvas {
            width: 100vw !important;
            height: 100vh !important;
            display: block;
        }
    </style>
</head>
<body>
<a-scene
        mindar-image="imageTargetSrc: ./models/card.mind; autoStart: true;"
        embedded
        vr-mode-ui="enabled: false"
        loading-screen="enabled: false"
        renderer="antialias: true; alpha: false"
>
    <a-assets>
        <a-asset-item id="treeModel" src="./models/tree.glb"></a-asset-item>
    </a-assets>

    <!-- 修复相机配置 -->
    <a-camera
            active="false"
            position="0 0 0"
            look-controls="enabled: true"
    ></a-camera>

    <a-entity mindar-image-target="targetIndex: 0">
        <!-- 调整模型位置和大小 -->
        <a-entity
                gltf-model="#treeModel"
                position="0 0.3 0"
                scale="0.2 0.2 0.2"
                rotation="0 0 0"
        ></a-entity>
    </a-entity>

    <!-- 增强光照 -->
    <a-entity light="type: ambient; color: #FFFFFF; intensity: 0.9"></a-entity>
    <a-entity light="type: directional; color: #FFFFFF; intensity: 1.2" position="2 8 5"></a-entity>
</a-scene>
</body>
</html>